<template>
  <div>
    <h3>upload组件的使用</h3>
    <el-upload action="https://jsonplaceholder.typicode.com/posts/" :file-list="files">
      <el-button type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload><!--action是文件上传的地址，属于必传参数-->
    <br>
    <br>
    <h4>upload组件之属性使用</h4>
<!--    data 属性的作用：上传文件时所带上的一些额外数据 -->
<!--    name 属性表示后端通过什么字段名来接收这个文件 -->
    <el-upload action="https://jsonplaceholder.typicode.com/posts/" :file-list="files" multiple :data="fileInfo" name="avatar" drag :show-file-list="false" accept=".png,.jpeg"
               :on-preview="printFileInfo" :on-error="printError"><!--multiple表示是否可以一次性上传多张图片-->
<!--      <el-button type="primary">点击上传</el-button>-->
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload><!--action是文件上传的地址，属于必传参数-->

    <hr>
    <h4>注意事项: 某些属性实际上是方法,在使用这些属性时要记得带上冒号:</h4>

  </div>
</template>
<script>
export default {
  data() {
    return {
      files: [{
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
      }, {
        name: 'food2.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
      }],
      fileInfo: {id:"22", name: "java"}
    }
  },
  methods:{
    printFileInfo(file) {
      console.log(file);
    },
    printError(err, file, files) {
      console.log(err);
    },
  }

}
</script>

<style scoped>

</style>
